<template>
  <transition name="fade">
    <view class="container" v-if="isShowAnimation">
      <view class="msg-container">
        <view class="msg">
          {{ msg }}
        </view>
      </view>
    </view>
  </transition>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const isShowAnimation = computed(() => {
  return store.state.isShowDialogue;
});

const msg = computed(() => {
  return store.state.dialogueMsg;
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;

  .msg-container {
    position: absolute;
    bottom: 100px;
    max-width: 70%;
    left: auto;
    right: auto;
    background-color: rgba($color: #9c5c37, $alpha: 0.89);
    border-radius: 12px;

    .msg {
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 30px;
      padding-right: 30px;
      color: white;
      font-family: xiaolai;
      font-size: 14px;
    }
  }
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s linear;
}
</style>
